<!DOCTYPE html>
<!-- saved from url=(0035)http://www.bootcss.com/p/grumblejs/ -->
<html lang="zh-CN"><!--<![endif]--><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>grumble.js文档 - 气泡形状的提示（tooltip）控件</title>
	<meta name="description" content="grumble.js文档 - 气泡形状的提示（tooltip）控件">
	<meta name="author" content="James Cryer">

	<link rel="stylesheet" href="http://www.bootcss.com/p/grumblejs/css/grumble.min.css?v=5">

	<style>
		body {
			font-size: 16px;
			line-height: 24px;
			background: #fff;
			color: #330;
			font-family: "Georgia", FreeSerif, serif;
			padding-left: 30px;
			}
		#container {
			width: 690px;
			margin: 50px 0 50px 50px;
			}
		p, li {
			margin: 16px 0 16px 0;
			width: 550px;
			}
			p.break {
				margin-top: 35px;
				}
		a, a:visited {
			padding: 0 2px;
			text-decoration: none;
			background: #f7f7bb;
			color: #330;
			}
			a:active, a:hover {
				color: #000;
				background: #ff8;
				}
			.contact {
				background: transparent;
				color: #441;
				}
				.contact:active, .contact:hover {
					background: transparent;
					}
		h1, h2, h3, h4, h5, h6 {
			margin-top: 40px;
			display:inline-block;
			}
		b.header {
			font-size: 18px;
			}
		span.alias {
			font-size: 14px;
			font-style: italic;
			margin-left: 20px;
			}
		table {
			margin: 16px 0; padding: 0;
			}
			tr, td {
				margin: 0; padding: 0;
				}
				td {
					padding: 9px 15px 9px 0;
					}
					td.definition {
						line-height: 18px;
						font-size: 14px;
						}
		code, pre, tt {
			font-family: Consolas, "Lucida Console", monospace;
			font-size: 12px;
			line-height: 18px;
			color: #444;
			}
		code {
			margin-left: 20px;
			}
		pre {
			font-size: 12px;
			padding: 2px 0 2px 12px;
			border-left: 6px solid hotpink;
			margin: 0px 0 10px;
			}
		li pre {
			padding: 0;
			border-left: 0;
			margin: 6px 0 6px 0;
			}
		#diagram {
			margin: 20px 0 0 0;
			}
	</style>
	
	<style>
		.ex {
			display:inline-block;
			width: 150px;
			padding-left:3px;
			height:20px;
			border:1px solid #ddd;
			font-size: 12px;
			font-family: Consolas, "Lucida Console", monospace;
			}
			
		.grumble-button {
			font-size:11px;
			}
	</style>
	
</head>

<body>

	<div id="container">
		<header>
			<h1>grumble.js</h1>
		</header>
		<div id="main" role="main">
			<br>
			<p>
				最开始是为 <a href="http://www.huddle.com/">Huddle.com</a> 网站开发的, 
				<a href="https://github.com/jamescryer/grumble.js">grumble.js</a> 是一个很特别的提示控件，它没有通常的north/east/south/west的定位限制。
			</p>
			<p>
				任何一个grumble都可以放到它所围绕元素的任意角度的位置，360度全方位无死角，无残留。还能指定任意距离，应用任意CSS样式。
				对于任意文本还可以自动调整大小。
				多个grumble可以通过FX队列实现动画效果。 queues for animating multiple grumbles.
				最后，它能在IE6+这些古董浏览器上工作，更不用FF、Chrome这些现代的浏览器了！
			</p>
			
			<p>grumble.js 其实是一个jQuery插件，可以在 <a href="https://github.com/jamescryer/grumble.js">Github</a>找到源码。</p>
			
			<pre>$('h1').grumble({
	text: 'Bubble-tastic!', 
	angle: 85, 
	distance: 100, 
	showAfter: 500 
});</pre>
			
			<h2>案例</h2>
			<p>
				点<a href="http://www.bootcss.com/p/grumblejs/#" id="ex1">这里</a>就能看到以下代码实现的grumble动画。
			</p>
			
			<span class="ex" id="grumble1">无文本</span>
			<span class="ex" id="grumble2">可选样式</span>
			<span class="ex" id="grumble3">带有关闭按钮</span>
			<span class="ex" id="grumble4">超大文本区</span>
			
			<br><br>
			
			<pre>$('#grumble1').grumble(
	{
		text: '', 
		angle: 200, 
		distance: 3, 
		showAfter: 1000,
		hideAfter: 2000
	}
);
$('#grumble2').grumble(
	{
		text: 'Ohh, blue...', 
		angle: 180, 
		distance: 0, 
		showAfter: 2000,
		type: 'alt-', 
		hideAfter: 2000
	}
);
$('#grumble3').grumble(
	{
		text: 'Click me!',
		angle: 150,
		distance: 3,
		showAfter: 3000,
		hideAfter: false,
		hasHideButton: true,
		buttonHideText: 'Pop!'
	}
);
$('#grumble4').grumble(
	{
		text: 'Whoaaa, this is a lot of text that i couldn\'t predict',
		angle: 85,
		distance: 50,
		showAfter: 4000,
		hideAfter: 2000,
	}
);
);</pre>
						
		</div>
		
		<p>
			Can I haz callbacks? Sure.
		</p>
		
		<pre>$('#myElement').grumble({
	showAfter: 1000,
	hideAfter: 2000,
	onShow: function(){
		console.log('triggered when show animation completes');
	},
	onBeginHide: function(){
		console.log('triggered when hide animation begins');
	},
	onHide: function () { 
		console.log('triggered when hide animation completes');
	}
});
</pre>
		
		<h2 id="thedarkside">探索grumble.js</h2>
		<p>
			grumble.js 暴露了三个方法：'show'、'hide' 和 'adjust'。adjust方法可以用来更新grumble的位置或角度。
		</p>
		<p>
			警告：点击后面的链接会让你受精的！！！！<a href="http://www.bootcss.com/p/grumblejs/#" id="darkside">(:p)</a>
		</p>
		<pre>$('#darkside').click(function(e){
	var $me = $(this), interval;
	
	e.preventDefault();
	
	$me.grumble(
		{
			angle: 130,
			text: 'Look at me!',
			type: 'alt-', 
			distance: 10,
			hideOnClick: true,
			onShow: function(){
				var angle = 130, dir = 1;
				interval = setInterval(function(){
					(angle &gt; 220 ? (dir=-1, angle--) : ( angle &lt; 130 ? (dir=1, angle++) : angle+=dir));
					$me.grumble('adjust',{angle: angle});
				},25);
			},
			onHide: function(){
				clearInterval(interval);
			}
		}
	);
});
</pre>

		
		<h2>魔力之源?</h2>
		<p>
			grumble.js 使用了CSS3这种流行技术，并通过'计算'将自己定位到你所希望的位置上。
			对于现代的浏览器我们使用 <a href="http://www.w3.org/TR/css3-2d-transforms/">CSS3 transforms</a> ，对于 IE6+ 使用非标准的<a href="http://msdn.microsoft.com/en-us/library/ms533014%28v=vs.85%29.aspx">Matrix filters</a>.
			对于实际用到的气泡图片采用了Image spriting技术，你自己可以随意换，仅仅是改改CSS代码而已。 
		</p>
		
		<h2>致谢</h2>
		<p>
			Big thanks to everyone involved in creating the idea and design of grumble.js (aka. Huddle Bubbles). Let me know if you want explicit mention.
		</p>
		
		<footer>
			<br>
			<br>
			<p>Written by <a href="https://github.com/jamescryer">James Cryer</a></p>
			<p><a href="http://twitter.com/jamescryer" class="contact">@jamescryer</a></p>
			<p>Grumble.js由<a href="http://www.bootcss.com/">Bootstrap中文网</a>翻译整理</p>
		</footer>
	</div> <!-- eo #container -->

	<script src="./grumble.js文档 - 气泡形状的提示（tooltip）控件_files/jquery.min.js"></script>
	<script src="./grumble.js文档 - 气泡形状的提示（tooltip）控件_files/jquery.grumble.min.js"></script>
	<!--script src="js/Bubble.js?v=5"></script>
	<script src="js/jquery.grumble.js?v=5"></script-->

	<script>
	
		$('h1').grumble(
			{
				text: 'Bubble-tastic!', 
				angle: 85, 
				distance: 100, 
				showAfter: 500
			}
		);
	
		var isSequenceComplete = true;
		$('#ex1').click(function(e){
		
			e.preventDefault();
		
			if(isSequenceComplete === false) return true;
			isSequenceComplete = false;
			
			$('#grumble1').grumble(
				{
					text: '', 
					angle: 200, 
					distance: 3, 
					showAfter: 1000,
					hideAfter: 2000
				}
			);
			$('#grumble2').grumble(
				{
					text: 'Ohh, blue...', 
					angle: 180, 
					distance: 0, 
					showAfter: 2000,
					type: 'alt-', 
					hideAfter: 2000
				}
			);
			$('#grumble3').grumble(
				{
					text: 'Click me!',
					angle: 150,
					distance: 3,
					showAfter: 3000,
					hideAfter: false,
					hasHideButton: true, // just shows the button
					buttonHideText: 'Pop!'
				}
			);
			$('#grumble4').grumble(
				{
					text: 'Whoaaa, this is a lot of text that i couldn\'t predict',
					angle: 85,
					distance: 50,
					showAfter: 4000,
					hideAfter: 2000,
					onHide: function(){
						isSequenceComplete = true;
					}
				}
			);

		});
	
		$('#darkside').click(function(e){
			var $me = $(this), interval;
			
			e.preventDefault();
			
			$me.grumble(
				{
					angle: 130,
					text: 'Look at me!',
					type: 'alt-', 
					distance: 10,
					hideOnClick: true,
					onShow: function(){
						var angle = 130, dir = 1;
						interval = setInterval(function(){
							(angle > 220 ? (dir=-1, angle--) : ( angle < 130 ? (dir=1, angle++) : angle+=dir));
							$me.grumble('adjust',{angle: angle});
						},25);
					},
					onHide: function(){
						clearInterval(interval);
					}
				}
			);
		});
	
	</script><div class="grumble grumble100" style="top: 49.121584053612224px; left: 297.0610724494504px; width: 100px; height: 100px; -webkit-transform: rotate(40deg); opacity: 1;">&nbsp;</div><div class="grumble-text grumble-text100" style="top: 49.121584053612224px; left: 297.0610724494504px; width: 100px; height: 100px; opacity: 1;"><div class="outer"><div class="inner">Bubble-tastic!</div></div></div>
	
	<script src="./grumble.js文档 - 气泡形状的提示（tooltip）控件_files/projects.js"></script><script src="./grumble.js文档 - 气泡形状的提示（tooltip）控件_files/h.js" type="text/javascript"></script>


<div id="site-navbar" style="position: absolute; top: -4px; left: -3px; border: 0; z-index: 2000;padding:0;margin:0;"><a href="http://www.bootcss.com/" title="返回首页" style="background:none;"><img src="./grumble.js文档 - 气泡形状的提示（tooltip）控件_files/return-back.png" style="padding:0;margin:0;border:0; -webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;"></a></div><div class="grumble alt-grumble100" style="top: 1955.1825541008043px; left: 412.569072282917px; width: 100px; height: 100px; -webkit-transform: rotate(104deg); opacity: 1; display: none;">&nbsp;</div><div class="grumble-text grumble-text100" style="top: 1955.1825541008043px; left: 412.569072282917px; width: 100px; height: 100px; opacity: 1; display: none;"><div class="outer"><div class="inner">Look at me!</div></div></div><div class="grumble grumble50" style="top: 708.0422290817914px; left: 124.88170143762423px; width: 50px; height: 50px; -webkit-transform: rotate(155deg); opacity: 1; display: none;">&nbsp;</div><div class="grumble-text grumble-text50" style="top: 708.0422290817914px; left: 124.88170143762423px; width: 50px; height: 50px; opacity: 1; display: none;"><div class="outer"><div class="inner"></div></div></div><div class="grumble alt-grumble100" style="top: 717.7106781186548px; left: 272px; width: 100px; height: 100px; -webkit-transform: rotate(135deg); opacity: 1; display: none;">&nbsp;</div><div class="grumble-text grumble-text100" style="top: 717.7106781186548px; left: 272px; width: 100px; height: 100px; opacity: 1; display: none;"><div class="outer"><div class="inner">Ohh, blue...</div></div></div><div class="grumble grumble100" style="top: 710.8353197809328px; left: 467.8553390593274px; width: 100px; height: 100px; -webkit-transform: rotate(105deg); opacity: 1; display: none;">&nbsp;</div><div class="grumble-text grumble-text100" style="top: 710.8353197809328px; left: 467.8553390593274px; width: 100px; height: 100px; opacity: 1; display: none;"><div class="outer"><div class="inner">Click me!</div></div></div><div class="grumble-button" style="left: 557.8553390593274px; top: 800.8353197809328px; opacity: 1; display: none;" title="Pop!">x</div><div class="grumble grumble200" style="top: 580.3165295193731px; left: 730.692940185139px; width: 200px; height: 200px; -webkit-transform: rotate(40deg); opacity: 1; display: none;">&nbsp;</div><div class="grumble-text grumble-text200" style="top: 580.3165295193731px; left: 730.692940185139px; width: 200px; height: 200px; opacity: 1; display: none;"><div class="outer"><div class="inner">Whoaaa, this is a lot of text that i couldn't predict</div></div></div></body></html>